<template>
  <sidebar>
    <router-link :to="`/groups/${curGroup.id}`" class="sidebar-title flex align-items-center">
      <div class="title-icon shrink-0">
        <svg-icon icon-name="gitlab_users" class-name="s24" />
      </div>
      <span class="m-l-10 title collapse-hide">{{ curGroup.title }}</span>
    </router-link>
    <el-menu class="sidebar a-link-item" :default-active="active">
      <el-menu-item index="homepage" class="sidebar-item">
        <router-link :to="`/groups/${curGroup.id}`">
          <svg-icon icon-name="sidebar-homepage" />
          <span class="m-l-10 collapse-hide">概览</span>
        </router-link>
      </el-menu-item>
      <el-menu-item index="members" class="sidebar-item">
        <router-link :to="`/groups/${curGroup.id}/members`">
          <svg-icon icon-name="gitlab_users" />
          <span class="m-l-10 collapse-hide flex-1">成员</span>
          <span class="item-count collapse-hide">{{ curGroup.membersCount }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item index="activities" class="sidebar-item">
        <router-link :to="`/groups/${curGroup.id}/activities`">
          <svg-icon icon-name="sprite_icons_chart"/>
          <span class="m-l-10 collapse-hide">活跃</span>
        </router-link>
      </el-menu-item>
      <el-menu-item index="announcements" class="sidebar-item">
        <router-link :to="`/groups/${curGroup.id}/announcements`">
          <svg-icon icon-name="sprite_icons_bullhorn"/>
          <span class="m-l-10 collapse-hide">公告</span>
        </router-link>
      </el-menu-item>
      <el-menu-item
        v-if="isWebAdmin || isGroupOwner || isGroupAdmin"
        index="settings"
        class="sidebar-item"
      >
        <router-link :to="`/groups/${curGroup.id}/settings`">
          <svg-icon icon-name="gitlab_settings" />
          <span class="m-l-10 collapse-hide">设置</span>
        </router-link>
      </el-menu-item>
    </el-menu>
  </sidebar>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import Sidebar from '@/components/shared/Sidebar';

export default {
  name: 'groups-sidebar',
  components: { Sidebar },
  computed: {
    ...mapState({ curGroup: 'currentGroup' }),
    ...mapGetters(['isWebAdmin', 'isGroupOwner', 'isGroupAdmin']),
    active() { return this.$route.path.split('/')[3] || 'homepage'; },
  },
};
</script>

<style></style>
